<template>
	<view>
		<view class="mysetting" v-if="online && online.aid">
			<view class="mysa mysicon" @click="clickChangeIcon">个人头像<image :src="online.user.icon?online.user.icon:`https://www.xmemc.cn/upload/default.jpg`" mode="aspectFit" style="width:50px;height:50px;"></image>
			</view>
			<view class="mysa mysjob">性别
				<picker @change="changeSelete" :value="genderindex" range-key="name" :range="genders">
					<view class="mysjobname" v-if="online.user&&online.user.gender == 1">男</view>
					<view class="mysjobname" v-else-if="online.user&&online.user.gender == 2">女</view>
					<view class="mysjobname" v-else>保密</view>
				</picker>
			</view>
			<view hover-class="none" class="mysa mystruename" @click="$go.burl('my/settinginput?name=name')">真实姓名<text>{{online.user.name?online.user.name:'请填写'}}</text></view>
			<view hover-class="none" class="mysa mysname" @click="$go.burl('my/settinginput?name=intro')">签名<text>{{online.user.intro}}</text></view>
			
		</view>
	</view>
</template>

<script>

	export default {
		components: {
	
		},
		computed: {
			online() {
				let online = this.$store.getters['online/getOnline'];
				
				if (online && online.aid) return online;
				
				return {};
			},

		},
		data() {
			return {
				genderindex: 0,
				genders: [{
						id: '1',
						name: '男'
					},
					{
						id: '2',
						name: '女'
					},
					{
						id: '0',
						name: '保密'
					}
				]
			}
		},
		
		onLoad() {
			
		},

		methods: {
			clickChangeIcon() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								that._setUserIcon(image);
							},
							fail: function() {
								that.$tip.show('选择照片错误', 'warn');
							}
						});
					},
					fail: function() {
						that.$tip.show('选择照片错误', 'warn');
					}
				});
			},
			
			//修改身份
			changeSelete(e) {
				let index = e.detail.value;
				if (!this.genders[index]) return '';
			
				//提交修改数据
				this.clickAset('gender', this.genders[index].id);
			},
			_setUserIcon(image) {
				let that = this;
				let post = {};
				post['@file'] = {
					type: image.type,
					path: image.path,
					name: 'icon'
				}; 
				console.log(image);
				this.$loading.show('图片上传中');
				this.$iapi.vapi('upimg/post', post, {
					succ: js => {
						if(!js || !js.path) return this.$tip.show('上传失败','fail');
						
						this.clickAset('icon',js.path);
					},
					ever: js => {
						this.$loading.hide();
					}
				});
			},
			clickAset(key,val) {
				if (!val || !key) {
					return this.$tip.show('请填写内容', 'warn');
				}
				
				let post = {} ;
				post[key] = val ; 
				let that = this;
				this.$loading.show('提交中');
				that.$iapi.vapi('my/upd', post, { 
					succ: js => {
						that.$online.fetch(function(){
							
						});
					},
					ever: js => {
						this.$loading.hide();
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
	}

	.mysa {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18upx 59upx 18upx 30upx;
		font-size: 28upx;
		line-height: 56upx;
		color: #171717;
		border-top: 1px solid #f5f5f5;
		background: #fff url(https://u-static.lmjx.net/2019/xcxtimeline/images/barrow-right.png) right 28upx center no-repeat;
		background-size: 20upx 20upx;
	}

	.mysa text,
	.mysjobname {
		color: #505050;
	}
	
	.mysa text{
		overflow: hidden;
		width:80%;
	}
	.mysareaname,
	.myslogin {
		margin-top: 28upx;
	}

	.myssignout {
		margin-top: 54upx;
	}

	.mysicon {
		margin-top: 28upx;
	}

	.mysicon image {
		width: 78upx;
		height: 78upx;
		border-radius: 78upx;
	}
</style>
